<template>
    <!-- destroyOnClose -->
    <a-modal :bodyStyle="{ padding: 0, height: '600px', overflow: 'auto' }" centered :footer="null" v-model:visible="visible" :width="1100" v-if="visible">
        <template #title>
            <flexbox>
                <span>{{ detailData.versionName }}</span>
                <a-tag color="warning" style="margin-left: 8px"> {{ detailData.taskName }} </a-tag>
            </flexbox>
        </template>
        <div class="page-wrap page-wrap-ql">
            <div class="page-cont">
                <template v-for="(item, index) of showComs" :key="index">
                    <component :ref="item.comName" :is="item.comName" :detail="detailData" :stepStatus="detailData.formKey" disabled isHistoryModal/>
                    <a-divider style="margin: 0" v-if="index !== showComs.length - 1" />
                </template>
            </div>
        </div>
    </a-modal>
</template>

<script lang="ts">
import BaseInfo from '@/views/version/versionDetailPreview/components/BaseInfo.vue';
import RelateRequire from '@/views/version/versionDetail/components/RelateRequire/index.vue';
import RelateFile from '@/views/version/versionDetailReview/components/RelateFile/index.vue';
import ProductAudit from '@/views/version/versionDetailReview/components/ProductAudit.vue';
import CheckProcess from '../CheckProcess/index.vue';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        CheckProcess,
        BaseInfo,
        RelateRequire,
        RelateFile,
        ProductAudit
    },
    setup() {
        let allComps = [
            {
                comName: 'BaseInfo',
                showSteps: ['basicLine', 'productChange']
            },
            {
                comName: 'RelateRequire',
                showSteps: ['basicLine', 'productChange', 'productAudit']
            },
            {
                comName: 'CheckProcess',
                hideSteps: ['productAudit', 'devReview']
            },
            {
                comName: 'RelateFile'
            }
        ];
        const state = reactive<Recordable>({
            showComs: [], // 可以显示的模块数组
            detailData: {},
            visible: false
        });
        const open = (detailData) => {
            state.visible = true;
            state.showComs = [];
            state.detailData = detailData;
            resetComps();
            if (['productAudit', 'devReview'].includes(detailData.formKey)) {
                allComps.push({
                    comName: 'ProductAudit'
                });
            }
            // 发起阶段没有formKey
            if (!detailData.formKey) {
                state.showComs = allComps;
            } else {
                matchCom(detailData.formKey);
            }
        };
        // 匹配可显示的模块
        const matchCom = (formKey: string) => {
            state.showComs = allComps.filter((item) => {
                if (item.showSteps) {
                    return item.showSteps.includes(formKey);
                } else if (item.hideSteps) {
                    return !item.hideSteps.includes(formKey);
                } else {
                    return true;
                }
            });
            console.log(state.showComs);
        };
        const resetComps = () => {
            allComps = [
                {
                    comName: 'BaseInfo',
                    showSteps: ['basicLine', 'productChange']
                },
                {
                    comName: 'RelateRequire',
                    showSteps: ['basicLine', 'productChange', 'productAudit']
                },
                {
                    comName: 'CheckProcess',
                    hideSteps: ['productAudit', 'devReview']
                },
                {
                    comName: 'RelateFile'
                }
            ];
        };
        return {
            ...toRefs(state),
            open
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    position: relative;
    height: 100%;
    .page-cont {
        min-height: 516px;
        position: relative;
        background: #fff;
    }
}
</style>